<script setup>
import { useForm } from '@/hooks/common/form';
defineOptions({ name: 'OrderSearch' })

const emit = defineEmits(['reset', 'search'])
const { formRef, restoreValidation } = useForm();

const model = defineModel('model', { required: true })

const orderStatusOptions = []
const settlementStatusOptions = []

async function reset(){
  await restoreValidation();
  emit('reset');
}

async function search(){
  emit('search')
}
async function exportExcel(){
  emit('export')
}
</script>

<template>
  <div class="card-wrapper border-b-1px">
    <ElForm ref="formRef" :model="model" label-position="right" :label-width="80">
      <ElRow :gutter="24">
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.warehouse.orderTime')" prop="orderTime">
            <ElDatePicker
              v-model="model.times"
              type="daterange"
              :start-placeholder="$t('page.store.form.start')"
              :end-placeholder="$t('page.store.form.end')"
            ></ElDatePicker>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.warehouse.orderStatus')" prop="orderStatus">
            <ElSelect v-model="model.orderStatus" clearable>
              <ElOption
                v-for="(item, idx) in orderStatusOptions"
                :key="idx"
                :label="item.label"
                :value="item.value"
              ></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :md="8" :sm="0"></ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.warehouse.settlementStatus')" prop="settlementStatus">
            <ElSelect v-model="model.settlementStatus" clearable :placeholder="$t('page.store.form.platform')">
              <ElOption
                v-for="(item, idx) in settlementStatusOptions"
                :key="idx"
                :label="item.label"
                :value="item.value"
              ></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.warehouse.orderNo')" prop="orderNo">
            <ElInput v-model="model.orderNo" :placeholder="$t('page.manage.user.form.nickName')" />
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElSpace class="w-full">
            <ElButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </ElButton>
            <ElButton type="primary" plain @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </ElButton>
            <ElButton plain type="primary" @click="exportExcel">
              <template #icon>
                <icon-file-icons:microsoft-excel class="text-icon" />
              </template>
              批量导出面单
            </ElButton>
          </ElSpace>
        </ElCol>
      </ElRow>
    </ElForm>
  </div>
</template>

<style lang="scss" scoped>

</style>